/* -----------------------------------------------------------
   EMS | Clean, accessible theme for Power Pages / Bootstrap
   ----------------------------------------------------------- */

/* ========== A) Design tokens (easy brand tweaks) ========== */
:root{
  --brand-700: #1e5e2d;   /* darker forest green  */
  --brand-600: #2e7d32;   /* primary button color */
  --brand-500: #388e3c;
  --accent-600:#005ea2;   /* high-contrast focus blue (USWDS-like) */
  --danger-600:#b21f2d;

  --bg-body:   #f8fafc;   /* neutral page background */
  --bg-card:   #ffffff;   /* surface/card background */
  --text-900:  #111827;   /* primary text */
  --text-700:  #374151;   /* secondary text */
  --muted-300: #d1d5db;   /* borders */
  --muted-200: #e5e7eb;   /* soft borders / dividers */
  --muted-100: #f3f4f6;   /* table header / subtle bg */

  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.08);
  --shadow-md: 0 6px 16px rgba(16,24,40,.12);
  --focus-ring: 0 0 0 3px rgba(0,94,162,.2);
}

/* ========== B) Base / “zoom” normalization ========== */
html{ font-size:16px !important; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg-body);
  color:var(--text-900);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  line-height:1.5;
  zoom:1 !important;           /* neutralize theme scaling */
  transform:none !important;
}

  #Subgrid_user_permissions table thead tr th:nth-child(3),
  #Subgrid_user_permissions table thead tr th:nth-child(4),
  #Subgrid_user_permissions table thead tr th:nth-child(5),
  #Subgrid_user_permissions table thead tr th:nth-child(6),
  #Subgrid_user_permissions table tbody tr td:nth-child(3),
  #Subgrid_user_permissions table tbody tr td:nth-child(4),
  #Subgrid_user_permissions table tbody tr td:nth-child(5),
  #Subgrid_user_permissions table tbody tr td:nth-child(6) {
    display: none !important;
  }

/* Comfortable reading width for main content */
#content, .container, .page-copy, .entity-form, .tab-content{
  max-width:1200px;
  margin-inline:auto;
}

/* Headings: cleaner rhythm */
h1,h2,h3{ color:var(--text-900); font-weight:700; line-height:1.2; margin-top:1.2em; }
h1{ font-size:clamp(1.75rem, 2vw + 1rem, 2.25rem); }
h2{ font-size:clamp(1.375rem, 1.5vw + 1rem, 1.75rem); }
h3{ font-size:1.25rem; }
p, ul, ol{ color:var(--text-700); margin:0 0 .875rem 0; }

/* ========== C) “Card” feel for key sections ========== */
.entity-form .tab-content,
.page-copy > .row > div,
.page-copy > div:not(:has(.portal-notification)) {
  background:var(--bg-card);
  border:1px solid var(--muted-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:1rem 1.25rem;
}

/* ========== D) Action bars & button groups ========== */
/* Clean, consistent action area */
:is(.actions, .entity-form .actions, .entity-grid .view-toolbar, .list-actions, .form-actions, .modal-footer, .button-row, .usa-button-group){
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
  padding:.5rem .75rem;
  background:var(--bg-card);
  border:1px solid var(--muted-200);
  border-radius:var(--radius);
}

/* If any button still carries .pull-right, make it the rightmost item elegantly */
:is(.actions, .entity-form .actions, .entity-grid .view-toolbar) .pull-right{ margin-left:auto !important; float:none !important; }

/* Buttons: modern, accessible look that beats portal theme */
.btn, a.btn, button.btn, a[role="button"]{
  border-radius:var(--radius) !important;
  border:1px solid transparent !important;
  font-weight:600 !important;
  align-items:center;
  gap:.375rem;
  box-shadow:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .02s ease;
}

/* Primary */
.btn-primary{
  background:var(--brand-600) !important;
  border-color:var(--brand-600) !important;
  color:#fff !important;
}
.btn-primary:hover{ background:var(--brand-700) !important; border-color:var(--brand-700) !important; }
.btn-primary:active{ transform:translateY(1px); }

/* Secondary (was .btn-default in BS3) */
.btn-default, .btn-secondary{
  background:#fff !important;
  color:var(--text-900) !important;
  border-color:var(--muted-300) !important;
}
.btn-default:hover, .btn-secondary:hover{
  background:var(--muted-100) !important; border-color:var(--muted-300) !important;
}

/* Danger */
.btn-danger{
  background:var(--danger-600) !important;
  border-color:var(--danger-600) !important;
  color:#fff !important;
}
.btn-danger:hover{ filter:brightness(.9); }

/* Subtle / ghost */
.btn-link, .btn-ghost{
  background:transparent !important;
  color:var(--brand-600) !important;
  border-color:transparent !important;
}
.btn-link:hover, .btn-ghost:hover{ background:rgba(46,125,50,.08) !important; }

/* Focus ring for accessibility */
.btn:focus, a.btn:focus, button.btn:focus, a[role="button"]:focus{
  outline:3px solid var(--accent-600) !important;
  outline-offset:2px !important;
  box-shadow:var(--focus-ring) !important;
}

/* Disable full-width legacy buttons */
.btn-block{ width:auto !important; display:inline-flex !important; }

/* ========== E) Forms (cleaner inputs + radios/checkboxes inline) ========== */
label{ font-weight:600; margin-bottom:.25rem; }
.form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea{
  border:1px solid var(--muted-300) !important;
  border-radius:var(--radius) !important;
  background:#fff !important;
  color:var(--text-900) !important;
  height:2.5rem; padding:.5rem .75rem;
}
textarea{ min-height:6rem; }
.form-control:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--accent-600) !important;
  outline:3px solid var(--accent-600) !important;
  outline-offset:2px !important;
  box-shadow:var(--focus-ring) !important;
}
.help-block, .field-validation-valid, .validation-summary-errors{
  color:#6b7280; font-size:.875rem;
}

/* Inline yes/no etc. */
.form-group .radio, .form-group .checkbox, .form-check{
  display:inline-flex !important; align-items:center; margin-right:1rem;
}
.form-check + .form-check, .radio + .radio, .checkbox + .checkbox{ margin-left:.5rem; }


.dropdown.open > .dropdown-menu { 
  display: block; 
}

/* ========== F) Tables / grids (readable, not bulky) ==========
.table, .entity-grid table, .view-grid table{
  width:100%;
  background:#fff;
  border-radius:var(--radius);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
   */

.table thead th, .entity-grid thead th{
  background:var(--muted-100);
  color:var(--text-900);
  font-weight:700;
  border-bottom:1px solid var(--muted-200);
}
.table tbody tr:nth-child(even){ background:#fcfcfd; }  /* soft zebra */
.table td, .table th{ padding:.625rem .75rem; }

/* Keep tables scrollable on small screens */
.view-grid, .entity-grid{ overflow:auto; }

/* ========== G) Little polish touches ========== */
.portal-notification, .alert{
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
hr{ border-top:1px solid var(--muted-200); margin:1rem 0; }

/* ========== H) Small-screen tweaks ========== */
@media (max-width: 576px){
  html{ font-size:15px !important; }
  :is(.actions, .entity-form .actions, .entity-grid .view-toolbar){ gap:10px !important; padding:.5rem; }
  .btn{ padding:.5rem .875rem !important; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-close {
    position: absolute !important;
    top: auto !important;
    font-size: 30px
}

.modal-title {
  font-size: 1.5rem;
  margin: 0;
}

.modal-body {
  padding-top: 10px;
}

.modal-dialog {
  margin-top: 160px; /* Pushes the modal down from the top */
}

.modal-content {
  overflow: visible; /* Ensures content isn't clipped */
}


.toolbar-actions {
    display: flex !important;
    gap: 10px; /* optional spacing between buttons */
    align-items: center; /* vertically align if needed */
}